I'm using AG-Grid (in React, but an explanation in any framework will do) and have a custom 'valueGetter' applied to my colDef that carries out a calculation/format on the cell value before returning it to be displayed in the cell.

Current (functions as expected):

const defaultColDef = {
  valueGetter: (params) => {
    const result = doCalcFormat(params);  //doCalcFormat applies calculations and formats
    return result;
    },
 }

I'm trying to add the ability for the 'doCalcFormat' func to be asynchronous so that inside of it can get data from an API, then calculate/format with that data, and then return the final value to the valueGetter.

However, when I apply the async keyword to my valueGetter, all of my cells are filled with [object Promise] instead of the actual value

Attempting:

const defaultColDef = {
   valueGetter: async (params) => {             //added 'async'
    const result = await doCalcFormat(params);  //an async version of 'doCalcFormat()' was made
    console.log(result);                       //always logs expected result
    return result;
   },
}

async function doCalcFormat(params) {
    const res = await loadDataFunction();   //async func
    return res;
}

But when table loads:

//table fills with [object Promise]

My question is, why does this happen and how could I wait for 'doCalcFormat' to finish its operation before returning in my valueGetter? Even if I leave 'doCalcFormat' to be a normal function it still does this same thing, making me think the 'async' in valueGetter is throwing it off